{extend name="Layout/base" /}
{block name="content"}
<!-- //////////////////////////////////////////////////////////////////////////// --> 
<!-- START CONTAINER -->
<div class="container-padding">

  
  <!-- Start Row -->
  <div class="row">

    <div class="col-md-12">
      <div class="panel panel-default">

        <div class="panel-title">General</div>

            <div class="panel-body">

              <div class="col-md-6 padding-l-0">
                <h4>Google Web Fonts</h4>
                <p>Kode using <a href="https://www.google.com/fonts" target="_blank">Google Web Font</a>. You can change your fonts only editing one line code.</p>

                <h4 class="margin-t-40">General Font</h4>
                <p>Kode using general font as <strong>Open Sans</strong>.</p>
                <div class="color1" style="font-size:20px;">
                  <p class="font-w-300">Open Sans Light 300</p>
                  <p class="font-w-300"><em>Open Sans Light 300 Italic</em></p>
                  <p class="font-w-400">Open Sans Normal 400</p>
                  <p class="font-w-400"><em>Open Sans Normal 400 Italic</em></p>
                  <p class="font-w-600">Open Sans Semi-Bold 600</p>
                  <p class="font-w-600"><em>Open Sans Semi-Bold 600 Italic</em></p>
                  <p class="font-w-700">Open Sans Bold 700</p>
                  <p class="font-w-700"><em>Open Sans Bold 700 Italic</em></p>
                  <p class="font-w-800">Open Sans Extra-Bold 800</p>
                  <p class="font-w-800"><em>Open Sans Extra-Bold 800 Italic</em></p>
                </div>
              </div>


              <div class="col-md-6 padding-0">
                <h4>General Options</h4>
                <p>We set it line height as <b>1.7em</b> and default font size as <b>13px</b></p>

                <h4 class="margin-t-40">Basic Colors</h4>
                <p class="clearfix">
                  <span class="colorsheme color1-bg"></span>
                  <span class="colorsheme color0-bg"></span>
                  <span class="colorsheme color2-bg"></span>
                  <span class="colorsheme color3-bg"></span>
                  <span class="colorsheme color4-bg"></span>
                </p>

                <h4 class="margin-t-40">Theme Colors</h4>
                <p class="clearfix">
                  <span class="colorsheme color5-bg"></span>
                  <span class="colorsheme color6-bg"></span>
                  <span class="colorsheme color7-bg"></span>
                  <span class="colorsheme color8-bg"></span>
                  <span class="colorsheme color9-bg"></span>
                  <span class="colorsheme color10-bg"></span>
                  <span class="colorsheme color11-bg"></span>
                  <span class="colorsheme color12-bg"></span>
                  <span class="colorsheme color13-bg"></span>
                  <span class="colorsheme color14-bg"></span>
                  <span class="colorsheme color15-bg"></span>
                </p>

                <h4 class="margin-t-40">Title Font</h4>
                <p>Title font is Montserrat. You can add anything as <code>.font-title</code></p>

                <div class="color1" style="font-size:20px;">
                  <p class="font-w-400 font-title">Montserrat Normal 400</p>
                  <p class="font-w-700 font-title">Montserrat Bold 700</p>
                </div>
              </div>

            </div>

      </div>
    </div>

  </div>
  <!-- End Row -->

  
  <!-- Start Row -->
  <div class="row">

    <div class="col-md-12">
      <div class="panel panel-default">

        <div class="panel-title">Headings</div>

            <div class="panel-body">

              <div class="col-md-6 padding-l-0">
                <h4>Default</h4>
                <p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code>, are available. <code>.h1</code> through <code>.h6</code> classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.</p>
                  <h1>h1. Bootstrap heading</h1>
                  <h2>h2. Bootstrap heading</h2>
                  <h3>h3. Bootstrap heading</h3>
                  <h4>h4. Bootstrap heading</h4>
                  <h5>h5. Bootstrap heading</h5>
                  <h6>h6. Bootstrap heading</h6>
              </div>

              <div class="col-md-6 padding-0">
                <h4>Headings with secondary text</h4>
                <p>Create lighter, secondary text in any heading with a generic <code>&lt;small&gt;</code> tag or the <code>.small</code> class.<br><br></p>
                  <h1>h1. Bootstrap heading <small>Secondary text</small></h1>
                  <h2>h2. Bootstrap heading <small>Secondary text</small></h2>
                  <h3>h3. Bootstrap heading <small>Secondary text</small></h3>
                  <h4>h4. Bootstrap heading <small>Secondary text</small></h4>
                  <h5>h5. Bootstrap heading <small>Secondary text</small></h5>
                  <h6>h6. Bootstrap heading <small>Secondary text</small></h6>
              </div>

            </div>

      </div>
    </div>

  </div>
  <!-- End Row -->

  
  <!-- Start Row -->
  <div class="row">

    <div class="col-md-12">
      <div class="panel panel-default">

        <div class="panel-title">Paragraph</div>

            <div class="panel-body">

              <div class="col-md-6 padding-l-0">
                <h4>Basic</h4>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pharetra metus a augue pellentesque aliquet. Duis id elit dolor. Pellentesque gravida molestie egestas. Phasellus neque leo, fermentum at lobortis nec, efficitur in ante.</p>
                  
                  <p>Vestibulum enim diam, facilisis eu luctus vel, rhoncus in lectus. Vestibulum faucibus nec elit sed mollis. Vestibulum convallis tellus quis dictum convallis. Vivamus euismod nunc ut dolor finibus, eget gravida eros porta. Suspendisse eu lorem vel ex iaculis venenatis a ut lorem. </p>
                  
                  <p>Vestibulum sed vestibulum neque, sed vehicula lectus. Nam a diam sollicitudin, gravida nisi quis, ultrices dolor. Vestibulum viverra dignissim mollis. Morbi consectetur rhoncus augue nec maximus. Quisque aliquam lacinia metus, a iaculis magna fringilla et. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
              </div>

              <div class="col-md-6 padding-0">
                <h4>Headings with secondary text</h4>
                <p>Make a paragraph stand out by adding <code>.lead</code>.</p>
                  <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pharetra metus a augue pellentesque aliquet. Duis id elit dolor. Pellentesque gravida molestie egestas. Phasellus neque leo, fermentum at lobortis nec, efficitur in ante.Fusce pharetra metus a augue</p>
              </div>

            </div>

      </div>
    </div>

  </div>
  <!-- End Row -->


  <!-- Start Row -->
  <div class="row">

    <div class="col-md-6 -col-sm-12">
      <div class="panel panel-default">

        <div class="panel-title">
          Inline text elements
        </div>

            <div class="panel-body">
              <h4>Marked Text</h4>
              <p>You can use the mark tag to <mark>highlight</mark> text.</p>

              <h4>Deleted text</h4>
              <p><del>This line of text is meant to be treated as deleted text.</del></p>

              <h4>Strikethrough text</h4>
              <p><s>This line of text is meant to be treated as no longer accurate.</s></p>

              <h4>Inserted text</h4>
              <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>

              <h4>Underlined text</h4>
              <p><u>This line of text will render as underlined</u></p>

              <h4>Small text</h4>
              <p><small>This line of text is meant to be treated as fine print.</small></p>
            </div>

      </div>
    </div>

    <div class="col-md-6">
      <div class="panel panel-default">

        <div class="panel-title">
          Alignment and Transformation
        </div>

            <div class="panel-body">
              <h4>Alignment classes</h4>
              <p class="text-left">Left aligned text.</p>
              <p class="text-center">Center aligned text.</p>
              <p class="text-right">Right aligned text.</p>
              <p class="text-justify">Justified text.</p>
              <p class="text-nowrap">No wrap text.</p>
              <h4>Transformation classes</h4>
              <p class="text-lowercase">Lowercased text.</p>
              <p class="text-uppercase">Uppercased text.</p>
              <p class="text-capitalize">Capitalized text.</p>
            </div>

      </div>
    </div>

  </div>
  <!-- End Row -->


  <!-- Start Row -->
  <div class="row">

    <div class="col-md-6 -col-sm-12">
      <div class="panel panel-default">

        <div class="panel-title">
          Abbreviations
        </div>

            <div class="panel-body">
              <p>Stylized implementation of HTML's <code>&lt;abbr&gt;</code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover and to users of assistive technologies.</p>

              <h4>Basic abbreviation</h4>
              An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>

              <h4>Initialism</h4>
              <abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.
            </div>

      </div>
    </div>

    <div class="col-md-6">
      <div class="panel panel-default">

        <div class="panel-title">
          ADDRESSES
        </div>
            <div class="panel-body">
              <address>
                <strong>Making Good Things, Inc.</strong><br>
                692 Merry Poe Ave, Suite 201<br>
                San Francisco, CA 96540<br>
                <abbr title="Phone">P:</abbr> (123) 456-7890
              </address>

              <address>
                <strong>Full Name</strong><br>
                <a href="mailto:#">first.last@example.com</a>
              </address>
            </div>

      </div>
    </div>

  </div>
  <!-- End Row -->


  <!-- Start Row -->
  <div class="row">

    <div class="col-lg-3 col-md-6">
      <div class="panel panel-default">

        <div class="panel-title">
          Unordered List
        </div>

            <div class="panel-body">
              <ul>
                <li>Home</li>
                <li>About Us</li>
                <li>Works</li>
                <li>Jobs
                  <ul>
                    <li>Designer</li>
                    <li>Front-end Developer</li>
                    <li>IOS Developer</li>
                  </ul>
                </li>
                <li>Contact</li>
              </ul>
            </div>

      </div>
    </div>

    <div class="col-lg-3 col-md-6">
      <div class="panel panel-default">

        <div class="panel-title">
          Ordered List
        </div>

            <div class="panel-body">
              <ol>
                <li>Home</li>
                <li>About Us</li>
                <li>Works</li>
                <li>Jobs
                  <ol>
                    <li>Designer</li>
                    <li>Front-end Developer</li>
                    <li>IOS Developer</li>
                  </ol>
                </li>
                <li>Contact</li>
              </ol>
            </div>

      </div>
    </div>

    <div class="col-lg-3 col-md-6">
      <div class="panel panel-default">

        <div class="panel-title">
          Unstyled List
        </div>

            <div class="panel-body">
              <ul class="list-unstyled">
                <li>Home</li>
                <li>About Us</li>
                <li>Works</li>
                <li>Jobs
                  <ul>
                    <li>Designer</li>
                    <li>Front-end Developer</li>
                    <li>IOS Developer</li>
                  </ul>
                </li>
                <li>Contact</li>
              </ul>
            </div>

      </div>
    </div>

    <div class="col-lg-3 col-md-6">
      <div class="panel panel-default">

        <div class="panel-title">
          Inline List
        </div>

            <div class="panel-body">
              <ul class="list-inline">
                <li>Home</li>
                <li>Works</li>
                <li>Jobs</li>
                <li>Contact</li>
              </ul>
            </div>

      </div>
    </div>

  </div>
  <!-- End Row -->


  <!-- Start Row -->
  <div class="row">

    <div class="col-md-12">
      <div class="panel panel-default">

        <div class="panel-title">
          Blockquotes
        </div>

            <div class="panel-body">
              <h4>Default blockquote</h4>
              <blockquote>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
              </blockquote>

              <h4>Naming a source</h4>
              <blockquote>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
              </blockquote>
              
              <h4>Alternate displays</h4>
              <blockquote class="blockquote-reverse">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
              </blockquote>
            </div>

      </div>
    </div>

  </div>
  <!-- End Row -->


  <!-- Start Row -->
  <div class="row">

    <div class="col-md-12">
      <div class="panel panel-default">

        <div class="panel-title">
          Descriptions
        </div>

            <div class="panel-body">
              <div class="col-md-6 padding-l-0">
                <h4>Normal</h4>
                  <dl>
                    <dt>Donec lobortis justo at aliquet</dt>
                    <dd>Sed tincidunt pharetra ante, tempus imperdiet elit sodales id. Donec lobortis justo at aliquet luctus. Praesent interdum massa sed ex efficitur, vitae dignissim ante pharetra</dd>
                    <dt>Tempus imperdiet elit</dt>
                    <dd>Sed tincidunt pharetra ante, tempus imperdiet elit sodales id. Donec lobortis justo at aliquet luctus. Praesent interdum massa sed ex efficitur, vitae dignissim ante pharetra</dd>
                    <dt>Praesent interdum</dt>
                    <dd>Sed tincidunt pharetra ante, tempus imperdiet elit sodales id. Donec lobortis justo at aliquet luctus. Praesent interdum massa sed ex efficitur, vitae dignissim ante pharetra</dd>
                  </dl>
              </div>

              <div class="col-md-6 padding-0">
                <h4>Horizontal</h4>
                  <dl class="dl-horizontal">
                    <dt>Donec lobortis justo at aliquet</dt>
                    <dd>Sed tincidunt pharetra ante, tempus imperdiet elit sodales id. Donec lobortis justo at aliquet luctus. Praesent interdum massa sed ex efficitur, vitae dignissim ante pharetra</dd>
                    <dt>Tempus imperdiet elit</dt>
                    <dd>Sed tincidunt pharetra ante, tempus imperdiet elit sodales id. Donec lobortis justo at aliquet luctus. Praesent interdum massa sed ex efficitur, vitae dignissim ante pharetra</dd>
                    <dt>Praesent interdum</dt>
                    <dd>Sed tincidunt pharetra ante, tempus imperdiet elit sodales id. Donec lobortis justo at aliquet luctus. Praesent interdum massa sed ex efficitur, vitae dignissim ante pharetra</dd>
                  </dl>
              </div>
            </div>

      </div>
    </div>

  </div>
  <!-- End Row -->





</div>
<!-- END CONTAINER -->
 <!-- //////////////////////////////////////////////////////////////////////////// -->
{/block}